<template>
  <div class="replyCon">
    <van-divider
    :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
    我的订单
    </van-divider>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :offset="10"  @load="onLoad">
        <van-cell v-for="order in orderList" :key="order.orderId">
            <div  @click="orderDetail(order.orderId)">
                <p>订单编号：{{order.orderNo}}</p>
                <p v-if="order.orderStatus == 0">订单状态：未付款 </p>
                <p v-if="order.orderStatus == 1">订单状态：已付款 </p>
                <p>下单时间：{{order.createTime}}</p>
            </div>
            <van-button v-if="order.orderStatus == 0" type="primary" size="mini" @click="toPay(order.orderId)"> 去付款</van-button>
        </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
    data() {
        return {
            orderList: [],
            queryInfo: {
                query: '',
                //当前页数
                pagenum: 1,
                //当前每页显示多少数据
                pagesize: 10
            },
            total: '',
            loading: false,
            finished: false,
        }
    },
    methods: {
        async getOrderList() {
            const {data: res} = await this.$http.post("/api/order/getMyOrder",{pagenum:this.queryInfo.pagenum,pagesize:this.queryInfo.pagesize})
            if (res.code !== 200) {
                this.$toast('订单加载失败')
                return
            }
            if (res.data.records.length === 0) {  		// 判断获取数据条数若等于0
                this.finished = true;		// 停止加载
            }
            //数据不为0
            this.orderList.push(...res.data.records)//加载数据
            this.total = res.data.total //给数据条数赋值
            this.loading = false			// 加载状态结束 
            // 如果list长度大于等于总数据条数,数据全部加载完成
            if (this.orderList.length >= res.data.total) {
                this.finished = true	// 结束加载状态
            }
        },
        onLoad() {
            this.getOrderList()
            this.queryInfo.pagenum++
        },
        orderDetail(orderId) {
          this.$router.push({name: 'orderDetail', params: {orderId: orderId}})
        },
        toPay(id) {
            this.$router.push({name:'pay',params:{orderId: id}})
        }  
    }
}
</script>

<style lang="less" scoped>
.replyCon {
    margin-bottom: 50px;
}
</style>